:root{
    max-content: 1000px;
    c-mask: rgba(0,0,0,0.8);
    header-width: 92px;
}
@font-face {
    font-family: 'PingFang SC';
    src:    url('/src/assets/D-DINExp-Bold.otf') format('bold'),
            url('/src/assets/D-DINExp.otf') format('normal');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
font-family: 'PingFang SC';
src: url('/src/assets/D-DINExp.otf') format('opentype');
font-weight: normal;
}

@font-face {
font-family: 'PingFang SC';
src: url('/src/assets/D-DINExp-Bold.otf') format('opentype');
font-weight: bold;
}
@tailwind base;
@tailwind components;
@tailwind utilities;


body{
    font-family: PingFang SC;
    
}
*{
    padding: 0;
    margin: 0;

}
.w-content{
    max-width: 1200px; /* var(max-content); */
}
.Mask::after{
    content: '';
    width: 100%;
    height: 100%;
    background-color:rgba(0,0,0,0.8);/* var(c-mask);*/
    position: absolute;
    left: 0;
    top: 0;
}
.Mask20::after{
    background-color:rgba(0,0,0,0.2);
}
.wen-bimg-BV::before{
    content: '';
    width: 30%;
    height: 50%;
    position: absolute;
    right: 0;
    top: 50%;
    display: block;
    background-image: url(./assets/BV.png);
    background-repeat: no-repeat;
    background-size: contain;
    transform: translateY(-61%);
    pointer-events: none
}
.wen-bimg-BV-phone{
    background-image: none !important;

}
.wen-bimg-BV-phone::before{
    content: '';
    width: 100%;
    height: 320px;
    
}

.wen-card.active,.wen-card:hover{
    color: white;
}
.wen-card.active p,.wen-card:hover p{
    color:#ffffffaa;
}
.wen-card .wen-card-hidden{
    opacity: 0;
    filter: alpha(opacity=);
    transition: all 0.6s;
}
.wen-card.active .wen-card-hidden,.wen-card:hover .wen-card-hidden{
    opacity: 1;
    filter: alpha(opacity=100);
}
.wen-ico{
    position: relative;
    min-height: 1em;
    min-width: 1em;

}
.wen-ico .wen-ico-item{
    transition: all 0.6s;
    position: absolute;
    left: 0;
    top: 0;
}
.wen-ico .wen-ico-item:first-child{
    opacity: 0;
}
.wen-ico .wen-ico-item:last-child{
    opacity: 1;
}
.wen-card:hover .wen-ico .wen-ico-item:first-child,.wen-card.active .wen-ico .wen-ico-item:first-child{
    opacity: 1;
}
.wen-card:hover .wen-ico .wen-ico-item:last-child,.wen-card.active .wen-ico .wen-ico-item:last-child{
    opacity: 0;
}
.wen-news-bgi::before{
    content: '';
    width: 100%;
    height: 50%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
}
.wen-news-card-bgi::before{
    content: '';
    width: 40%;
    height: 100%;
    position: absolute;
    right: 0;
    top:0;
    background-image: url('/src/assets/Rectangle_19.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.timing{
    transition-timing-function:cubic-bezier(0,0,0.6,1);
}
.clear{
    /* all:unset; */
}
.wenscroll .container{
    height: fit-content
}

.wen-svg-css{
    color: inherit;
    filter: drop-shadow(currentColor 40px 0);
    overflow: hidden;
    transform: translateX(-100%);
}
.wen-svg-20-css{
    filter: drop-shadow(currentColor 20px 0);
}
.wen-svg-24-css{ filter: drop-shadow(currentColor 24px 0); }
.wen-svg-32-css{ filter: drop-shadow(currentColor 32px 0); }
.wen-svg-80-css{
    filter: drop-shadow(currentColor 80px 0);
}
.wen-svg-640-css{
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    color: inherit;
    filter: drop-shadow(currentColor 640px 0);
    transform: translate(-100%, -50%);
    overflow: hidden;
}
@layer components {
    .wen-btn {
        @apply border border-gray-300 rounded;
    }

    .wen-icon {
        @apply absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 min-w-full min-h-full;
    }
    .menuShow{
        @apply fixed w-screen h-screen left-0 top-0 z-50 bg-[#000c] md:resetcss
    }
    .menu-content{
        @apply leading-9 bg-white text-black w-64 md:resetcss
    }
    .resetcss{
        @apply clear
    }
    .wen-index-title{
        @apply text-5xl text-dominant font-bold mobile:text-2xl
    }

    .wen-fixed-bc-full{
        @apply fixed left-0 top-[72px] w-full p-2 z-10 bg-white
    }

    .wen-timing{
        @apply timing
    }

    .wen-mobile-down-white{
        @apply mobile:pb-16 mobile:bg-[url('/src/assets/fa-angle-down-double-shite.svg')] mobile:bg-[center_bottom_32px] bg-no-repeat z-[1]
    }
    .wen-mobile-down{
        @apply mobile:pb-16 mobile:bg-[url('/src/assets/fa-angle-down-double.svg')] mobile:bg-[center_bottom_1em] bg-no-repeat z-[1]
    }
    .wen-svg{
        @apply wen-svg-css
    }
    .wen-svg-20{ @apply wen-svg-20-css }
    .wen-svg-24{ @apply wen-svg-24-css }
    .wen-svg-40{ @apply wen-svg-40-css }
    .wen-svg-80{ @apply wen-svg-80-css }
    .wen-svg-640{ @apply wen-svg-640-css }
    .wen-svg-32{ @apply wen-svg-32-css }
}